<template>
	<a-switch
		:class="curClassName"
		:style="curStyle"
		:checked="curValue"
		:disabled="disabled"
		@change="onChange"
	></a-switch>
</template>
<script setup lang="ts">
import { PresetSwitchProps } from './preset-switch';
import { IEvent } from '@/core';
import { Ref } from 'vue';
const props = defineProps(PresetSwitchProps);

interface PresetSwitchEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<PresetSwitchEmit>();

/**
 * 项名称
 *
 * @memberof AppPresetSwitch
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetSwitch
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppPresetSwitch
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-preset-switch ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 禁用
 *
 * @memberof AppPresetSwitch
 */
const disabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});

/**
 * 当前值
 *
 * @type {any}
 * @memberof AppPresetSwitch
 */
const curValue: Ref<boolean> = computed(() => {
	if (!props.value) {
		return false;
	} else {
		return true;
	}
});

/**
 * 值改变
 *
 * @type {any}
 * @memberof AppPresetSwitch
 */
const onChange = (value: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value ? 1 : 0,
	});
};
</script>
